<template>
  <div>
    <div class="top">
      <h1 class="theme">教育机构中心，欢迎您！</h1>
      <div class="time">当前时间：{{this.nowTime}}</div>
      <div class="headImage">
        <a href="javascript:void(0)" class="login" @click="exitLogin">{{this.name}}</a>
      </div>
    </div>

    <div class="main">
      <router-view/>
      <div>
        <el-dialog title="小调查" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="您感兴趣的年级" :label-width="formLabelWidth">
              <el-select v-model="form.level" placeholder="请选择年级">
                <el-option label="小学" value="小学"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="大学" value="大学"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="您学起来比较吃力的学科" :label-width="formLabelWidth">
              <el-input v-model="form.subjectDif" autocomplete="off" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="您比较喜欢的学科" :label-width="formLabelWidth">
              <el-input v-model="form.subjectLove" autocomplete="off" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="您比较想提升的学课" :label-width="formLabelWidth">
              <el-input v-model="form.subjectWant" autocomplete="off" style="width: 220px"></el-input>
            </el-form-item>

            <el-form-item label="您所在城市" :label-width="formLabelWidth">
              <el-select v-model="form.loc" placeholder="所在城市" style="width: 220px">
                <el-option
                  v-for="item in City"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="survey">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

    <div class="_left">
      <el-menu default-active="2" class="el-menu-vertical-demo"
               background-color="#4F4F4F" text-color="#fff" active-text-color="#ffd04b">

        <el-menu-item index="2">
          <span slot="title" @click="myClass">我的选课</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span slot="title" @click="selectCorFun">选课功能</span>
        </el-menu-item>
        <el-menu-item index="4">
          <span slot="title" @click="tecCenter">教师中心</span>
        </el-menu-item>
        <el-menu-item index="5">
          <span slot="title" @click="recCor">推荐课程</span>
        </el-menu-item>
        <el-menu-item index="6">
          <span slot="title" @click="stuCorMes">消息中心</span>
        </el-menu-item>
        <el-menu-item index="7">
            <span slot="title" @click="chatDemo">人工客服</span>
        </el-menu-item>
      </el-menu>
    </div>

  </div>

</template>

<script>
export default {
  name: "indexStu",
  data() {
    return{
      nowTime:'',
      username:'',
      name:'登陆',
      id:'',
      goodTec:[],
      visible: false,
      dialogFormVisible:false,
      mainDis:true,
      badgeRead:0,


      City:[{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '江苏',
        label: '江苏'
      }, {
        value: '四川',
        label: '四川'
      }, {
        value: '深圳',
        label: '深圳'
      }, {
        value: '广东',
        label: '广东'
      }, {
        value: '天津',
        label: '天津'
      }, {
        value: '河北',
        label: '河北'
      }, {
        value: '福建',
        label: '福建'
      }, {
        value: '山东',
        label: '山东'
      },
      ],


      form: {
        loc:'',
        level:'',
        subjectDif:'',
        subjectLove:'',
        subjectWant:'',
      },
      formLabelWidth: '180px',

    }
  },
  methods:{
    checkMes(){
      let _this = this
      this.$axios({
        method:"GET",
        url:"http://localhost/user_admin/checkMes/"+this.username,
      }).then(response => {
        let Mes = response.data
        for(let i of Mes){
          _this.badgeRead++
        }
        if(_this.badgeRead!=0)
        {
          _this.$notify.info({
            title: '消息',
            message: '您收到人工客服发来的'+_this.badgeRead+'条未读消息，点击人工客服进行查看'
          });
        }
      })
    },

    chatDemo(){
      let _this = this
      this.$axios({
         method:"GET",
         url:"http://localhost/user_admin/read/"+this.username+"/admin"
      }).then(result => {

      })


      this.$router.push({
        path: "/chatStu",
        query: {
          username: this.username,
        }

      });
    },

    recCor(){
      this.$router.push({
        path: "/recCor",
        query: {
          username: this.username,
        }

      });
    },

    tecCenter(){
      this.$router.push({
        path: "/tecCenter",
        query: {
          username: this.username,
        }

      });
    },

    stuCorMes(){
      this.$router.push({
        path: "/stuCorMes",
        query: {
          username: this.username,
        }

      });
    },

    selectCorFun(){
      this.$router.push({
        path: "/selectCor",
        query: {
          username: this.username,
        }

      });
    },

    myClass(){
      this.$router.push({
        path: "/myClass",
        query: {
          username: this.username,
        }

      });
    },

    getTime() {
      let date = new Date();
      let seperator1 = "-";
      let seperator2 = ":";
      //以下代码依次是获取当前时间的年月日时分秒
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      let minute = date.getMinutes();
      let hour = date.getHours();
      let second = date.getSeconds();
      //固定时间格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minute >= 0 && minute <= 9) {
        minute = "0" + minute;
      }
      if (second >= 0 && second <= 9) {
        second = "0" + second;
      }
      return year + seperator1 + month + seperator1 + strDate
        + " " + hour + seperator2 + minute + seperator2 + second;
    },
    exitLogin(){
      this.$confirm('是否要退出登陆', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push("/")
        this.$message({
          type: 'success',
          message: '已退出!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    setTime(){
      this.timer = setInterval(() => {
        this.nowTime=this.getTime();
      }, 1000)
    },
    initUser(){
      this.username=this.$route.query.username
      let _this=this;
      this.$axios({
        method:'GET',
        url:'http://localhost/user/findByUsername/'+this.username

      }).then(response=>{
        _this.name=response.data.name;
      })

    },
    goodTecDis(){
      let _this=this;
      this.$axios({
        method:'GET',
        url:'http://localhost/teacher/find/'

      }).then(response=>{
        _this.goodTec=response.data;
      })
    },
    survey() {
      this.dialogFormVisible = false
      let _this=this
      this.$axios({
        method:'GET',
        url:'http://localhost/student/findByUsername/'+this.username

      }).then(response=>{
        _this.$axios({
          method:"POST",
          url:"http://localhost/student/saveSurvey",
          data:{
            sid:response.data.id,
            level:_this.form.level,
            subjectDif:_this.form.subjectDif,
            subjectLove:_this.form.subjectLove,
            subjectWant:_this.form.subjectWant,
            loc:_this.form.loc
          }
        }).then(result => {
          this.$message({
            message: '感谢您的填写，我们将为您推荐适合您的课程！',
            type: 'success'
          });
        })
      })







    },
    checkSurvey(){
      let _this=this;
      this.$axios({
        method:'GET',
        url:'http://localhost/student/findByUsername/'+this.username

      }).then(response=>{
        _this.$axios({
          method:"GET",
          url:"http://localhost/student/survey/"+response.data.id,
        }).then(result => {
          if(result.data==='err')
          {
            _this.dialogFormVisible=true;
          }
        })
      })



    }
  },
  mounted() {
    this.setTime();
    this.initUser();
    this.goodTecDis();
    this.checkSurvey();
    this.checkMes()
  }
}
</script>

<style scoped>
.top{
  position: absolute;
  background-color: #87CEFA;
  width: 99%;
  height: 100px;
}
.theme{
  position: absolute;
  color: #FFF8DC;
  left: 70px;
}
.time{
  position: absolute;
  color: white;
  left: 420px;
  top: 50px;
}

.login{
  color: black;
  position: absolute;
  top:45%;
  right: 20px;
  width: 60px;
}
._left{
  position: absolute;
  top:105px;
  width: 200px;
  height: 85%;
  background-color: black;
}
.el-menu-vertical-demo{
  position: absolute;
  height: 100%;
  width: 100%;
}
.main{
  position: absolute;
  top:105px;
  left:180px;
  width: 87.8%;
  height: 85%;
  background-color: white;
  overflow-y: auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.demonstration{
  color: #FF3030;
}
.goodTec{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 400px;
  height: 150px;
}
.item{
  position: relative;
  left: -520px;
  top: 3px;
}
</style>
